<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
/*
透明
Context对象可以通过改变它的globalAlpha属性来改变生成它的Canvas对象的透明度。globalAlpha属性的取值范围是[0, 1]，0表示完全透明，1表示完全不透明。
下面的示例在同一张画布中分别绘制了两块透明度不断变化的区域：
*/

var canvas =document.getElementById("myCanvas");    
var context =canvas.getContext("2d");    
     
var lCanvas =document.createElement("myCanvas");    
lCanvas.width = canvas.width / 2;    
lCanvas.height = lCanvas.width;    
var lContext =lCanvas.getContext("2d");    
lContext.fillStyle = "#ff0000";    
     
var rCanvas =document.createElement("myCanvas");    
rCanvas.width = canvas.width / 2;    
rCanvas.height = rCanvas.width;    
var rContext =rCanvas.getContext("2d");    
rContext.fillStyle = "#00ff00";    
     
const TIME = 0.01    
var factor = 0;    
     
function changeAlpha() {    
         factor+= TIME;    
         lContext.globalAlpha= (Math.sin(factor) + 1) / 2;    
         rContext.globalAlpha= (Math.cos(factor) + 1) / 2;    
}    
     
function draw() {    
         context.clearRect(0,0, canvas.width, canvas.height);    
         lContext.clearRect(0,0, lCanvas.width, lCanvas.height);    
         rContext.clearRect(0,0, rCanvas.width, rCanvas.height);    
         changeAlpha();    
         lContext.fillRect(0,0, lCanvas.width, lCanvas.height);    
         rContext.fillRect(0,0, rCanvas.width, rCanvas.height);    
         context.drawImage(lCanvas,0, 0);    
         context.drawImage(rCanvas,300, 0);    
}    
setInterval(draw, TIME);   
</script>
</body>
</html>